<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-10-20 16:26:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\exchangeOrder\details.vue
-->
<template>
  <div class="white-content" v-loading="pageLoading" element-loading-text="loading">
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display:inline-block;margin-left:10px;font-weight: bold;">换货单详情</h1>
    </div>
    <div class="content">
      <div class="detail-content-section">
        <h2>
          <span>换货单号：{{ datas.swapNo }}</span>
          <span style="float:right">换货单状态：{{ getDictionaryNameByCode('SWAPMAINSTATUS', datas.swapStatus) }}</span>
        </h2>
          <el-form label-width="140px" label-position="left">
            <el-row :gutter="40">
              <el-col :span="8">
                  <el-form-item label="关联主订单号：">
                    <span @click="masterDetails(datas.orderId)" class="colorLink">{{ datas.orderNo }}</span>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="关联子订单号：">
                      <span @click="subDetails(datas.subOrderId)" class="colorLink">{{ datas.subOrderNo }}</span>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="子订单类型：">{{ getDictionaryNameByCode('SUBORDERTYPE', datas.subOrderType) }}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                  <el-form-item label="用户ID：">{{ datas.customerId }}</el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="用户姓名：">{{datas.customerName  }}</el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="用户手机号：">{{ datas.customerMobile }}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                  <el-form-item label="用户邮箱：">{{datas.customerEmial}}</el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="VIN：">{{datas.vin}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="换货单创建时间：">{{datas.createTime | timestampToChange('time')}}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="换货单更新时间：">{{datas.updateTime | timestampToChange('time')}}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
      </div>
      <div class="detail-content-section">
        <h2>换货物流信息</h2>
        <el-form label-width="120px" label-position="left">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="快递公司：">{{datas.returnLogisticsCompany}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="快递单号：">{{datas.returnLogisticsNo}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运费金额：">{{datas.returnFreight}}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="换货寄回方式：">{{getDictionaryNameByCode('RETURNMETHOD', datas.returnMethod) }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detail-content-section">
        <h2>换货订单信息</h2>
        <div class="table-btn">
          <!-- <el-button class="search-btn" :disabled="isApply" v-if="$auth('orderManagement:swapNote:agreeToReturn')" @click="toApply('approve')">同意</el-button>
          <el-button class="white-btn" :disabled="isReject" v-if="$auth('orderManagement:swapNote:rejectOfReturn')" @click="toApply('reject')">拒绝</el-button> -->
          <el-button class="dark-btn" @click="approval" v-if="isApprove">审批</el-button>
          <el-button class="dark-btn" :disabled="notAllow(datas.returnMethod)" @click="addSwapInfo">增加换货信息</el-button>
          <el-button class="dark-btn" v-if="$auth('orderManagement:swapNote:viewPicturesOfReturn')" @click="toViewer">查看换货图片</el-button>
          <el-button class="dark-btn" v-if="$auth('orderManagement:swapNote:reviewRemark')" @click="getRemarks">查看备注</el-button>
        </div>
        <el-table
         :data="tableData"
        >
          <el-table-column
           label="商品名称"
           align="center"
           min-width="160"
           :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{ scope.row.spuName }}
          </template>
          </el-table-column>
          <el-table-column
           label="换货商品状态"
           align="center"
           min-width="120"
           :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{ getDictionaryNameByCode('SWAPSTATUS', scope.row.swapDetailStatus) }}
          </template>
          </el-table-column>
          <el-table-column
           label="SKU Code"
           align="center"
           min-width="120"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.skuCode }}
            </template>
          </el-table-column>
          <el-table-column
           label="SPU Code"
           align="center"
           min-width="120"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.spuCode }}
            </template>
          </el-table-column>
          <el-table-column
           label="退货数量"
           align="center"
           min-width="80"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column
           label="金额"
           align="center"
           min-width="80"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.returnAmount | numFormat }}
            </template>
          </el-table-column>
          <el-table-column
           label="申请渠道"
           align="center"
           min-width="80"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.applicationChannel }}
            </template>
          </el-table-column>
          <el-table-column
           label="退货原因"
           align="center"
           min-width="120"
           :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.returnReason }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col>
                  <span class="colorLink"  v-if="$auth('orderManagement:swapNote:viewReceiveInformation')" @click="receivingInfo(scope.row)">查看收货信息</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <apply-exchange
      ref="applyDialog"
      :title="applyTitle"
      :swapOrderId="id"
      :selectList="operationAmount"
      @fetchRelationList='getDetail(id)'
    ></apply-exchange>
    <remarks-dialog
      :tableData="remarksData"
      :isShow="showRemarks"
      :type="pageType"
      :loading="loading"
    ></remarks-dialog>
    <el-dialog
      :visible.sync="seeNoteDialog"
      title="仓库收货信息"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="45%"
      append-to-body
      top="10px"
    >
      <el-form ref="form" :model="deliveryForm" label-width="100px">
        <el-form-item label="包装是否完好">
          <el-radio-group v-model="deliveryForm.isPackageGood" disabled>
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="货物是否破损">
          <el-radio-group v-model="deliveryForm.isGoodsDamage" disabled>
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" disabled v-model="deliveryForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="float:right;padding-top: 20px;">
        <el-button @click="seeNoteIsClosed" >关 闭</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="isDeliveryDialog"
      title="确认收货"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="45%"
      append-to-body
      top="10px"
    >
      <span>
        点击【确定】后，将进入商品重新发货流程
      </span>
      <div style="padding-top: 25px;" class="dialog-footer">
        <el-button class="search-btn" @click="onSubmit">确 定</el-button>
        <el-button @click="isDeliveryDialog = false" style="margin-left: 20px">取 消</el-button>
      </div>
    </el-dialog> -->
    <el-dialog
      :visible.sync="inputInfoDialog"
      title="添加换货信息"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中...'"
      width="45%"
      append-to-body
      top="10px"
    >
      <div style="margin-bottom: 10px;">
        请输入退货物流信息：
      </div>
      <el-form
      :model="swapDialogForm"
      label-position="left"
      ref="addSwapForm"
      label-width="90px"
      size="small"
      class="dialogForm"
      >
      <el-form-item style="margin-bottom: 10px;" label="快递公司：">
        <el-input :disabled="isInput" v-model="swapDialogForm.returnLogisticsCompany"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" label="快递单号：">
        <el-input :disabled="isInput" v-model="swapDialogForm.returnLogisticsNo"></el-input>
      </el-form-item>
      <el-form-item label="运费金额：">
        <el-input :disabled="isInput" type="number" @blur="amountChange" v-model="swapDialogForm.returnFreight"></el-input>
      </el-form-item>
      </el-form>
      <div style="padding-top: 25px;text-align: center;" class="dialog-footer">
        <el-button class="search-btn" :disabled="isSubmit" @click="submitSwapInfo">确 定</el-button>
        <el-button @click="inputInfoDialog = false" style="margin-left: 20px">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { setRouterParams, getRouterParams } from '@/utils/auth'
import { USERNAME, USERID } from '@/config/variableInit'
import ApplyExchange from '../components/applyExchange.vue'
import RemarksDialog from '../components/remarks.vue'
import { getExchangeDetail, checkRemark, getReceivingInfo, addLogisticsInfo } from '@/api/order'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'

export default {
  name: 'exchangeOrderDetails',
  components: { ApplyExchange, RemarksDialog },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      datas: {},
      deliveryForm: {
        isPackageGood: '',
        isGoodsDamage: '',
        remark: ''
      },
      pageType: 'exchange',
      id: 0,
      dialogTitle: '',
      userName: '',
      userId: '',
      tableData: [],
      isApply: true,
      isReject: true,
      applyTitle: '同意换货申请',
      showApply: false,
      isDeliveryDialog: false,
      isApprove: true,
      remarksData: [],
      selectionList: [],
      operationAmount: [],
      showRemarks: false,
      seeNoteDialog: false,
      pageLoading: false,
      loading: false,
      same: '',
      isInput: false,
      isSubmit: false,
      swapDialogForm: {
        returnLogisticsCompany: '',
        returnLogisticsNo: '',
        returnFreight: ''
      },
      inputInfoDialog: false
    }
  },
  mounted () {
    this.userName = Vue.ls.get(USERNAME)
    this.userId = Vue.ls.get(USERID)
    let params = {}
    if (this.$route.params.id) {
      setRouterParams(this.$route)
      params = this.$route.params
    } else {
      params = getRouterParams(this.$route)
    }
    this.id = params.id
    this.getDetail(this.id)
  },
  methods: {
    getDetail (id) {
      const params = {
        id: id
      }
      this.pageLoading = true
      getExchangeDetail(params).then(res => {
        if (res) {
          if (Number(res.code) === 1) {
            this.datas = res.obj
            if (this.datas.returnFreight) {
              this.datas.returnFreight = Number(this.datas.returnFreight).toFixed(2)
            }
            this.datas.returnMethod = res.obj.returnMethod
            if (res.obj.returnLogisticsNo || res.obj.returnFreight || res.obj.returnLogisticsCompany) {
              this.isInput = true
            }
            this.swapDialogForm.returnFreight = res.obj.returnFreight
            this.swapDialogForm.returnLogisticsCompany = res.obj.returnLogisticsCompany
            this.swapDialogForm.returnLogisticsNo = res.obj.returnLogisticsNo
            if (this.datas.returnLogisticsNo !== '') {
              this.isSubmit = true
            } else {
              this.isSubmit = false
            }
            this.tableData = res.obj.list
            const statusList = []
            if (this.tableData.length !== 0) {
              this.tableData.forEach(item => {
                statusList.push(item.swapDetailStatus)
              })
              if (this.isAllEqual(statusList)) {
                this.isApprove = true
              } else {
                this.isApprove = false
              }
            }
          }
          this.pageLoading = false
        }
      })
    },
    isAllEqual (array) {
      if (array.length > 0) {
        return array.some(function (value) {
          return value === '1' || value === '8'
        })
      } else {
        return false
      }
    },
    notAllow (code) {
      if (code) {
        if (code === '1') {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
    getRemarks () {
      this.pageLoading = true
      const id = this.id
      const params = {
        id: id,
        owerType: '3'
      }
      checkRemark(params)
        .then(res => {
          this.pageLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.remarksData = obj.list
              this.showRemarks = true
            } else {
              this.$confirm(res.code, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
    },
    amountChange () {
      // this.swapDialogForm.returnFreight = Number(this.swapDialogForm.returnFreight).toFixed(2)
    },
    toViewer () {
      const id = this.id
      this.$router.push({ name: 'exChangePreviewImgs', params: { id: id, type: '3' } })
    },
    masterDetails (id) {
      if (!this.$auth('orderManagement:mainOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'masterOrderDetails', params: { id: id } })
    },
    subDetails (id) {
      if (!this.$auth('orderManagement:subOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'suborderDetails', params: { id: id } })
    },
    receivingInfo (row) {
      if (row.swapDetailStatus === '5' || row.swapDetailStatus === '6' || row.swapDetailStatus === '7') {
        this.seeNoteDialog = true
        const params = {
          id: row.id,
          owerType: '2'
        }
        this.pageLoading = true
        getReceivingInfo(params)
          .then(res => {
            this.pageLoading = false
            if (res) {
              if (Number(res.code) === 1) {
                const obj = res.obj
                if (obj.list.length !== 0) {
                  this.deliveryForm = obj.list[0]
                } else {
                  this.$alert('暂无收货信息', {
                    callback: action => {
                      this.seeNoteIsClosed()
                    }
                  })
                }
              } else {
                this.$confirm(res.code, {
                  confirmButtonText: '确定',
                  showCancelButton: false
                })
              }
            }
          })
      } else {
        this.$alert('暂无信息', {
          cancelButtonText: '关闭'
        })
      }
    },
    getReceiving (row) {

    },
    submitSwapInfo () {
      const params = {
        ...this.swapDialogForm,
        type: '3',
        id: this.datas.id
      }
      addLogisticsInfo(params).then(res => {
        if (res) {
          if (Number(res.code) === 1) {
            this.inputInfoDialog = false
            this.$alert('操作成功')
            this.getDetail(this.id)
          } else {
            this.inputInfoDialog = false
            this.$alert('操作失败')
          }
        }
      })
    },
    seeNoteIsClosed () {
      this.deliveryForm = {
        isPackageGood: '',
        isGoodsDamage: '',
        remark: ''
      }
      this.seeNoteDialog = false
    },
    approval () {
      let swapLevel = ''
      const applyData = []
      if (this.tableData.length !== 0) {
        this.tableData.forEach(item => {
          if (item.swapDetailStatus === '1') {
            applyData.push(item)
            swapLevel = '1'
          } else if (item.swapDetailStatus === '8') {
            applyData.push(item)
            swapLevel = '2'
          }
        })
      }
      this.$refs.applyDialog.open(applyData, this.datas, swapLevel)
    },
    addSwapInfo () {
      this.inputInfoDialog = true
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}

.table-btn {
  margin-bottom: 10px;
}

.detail-section{
    h2 {
        margin: 15px 0;
        font-weight: bold;
    }
}
/deep/ .el-form-item{
    margin-bottom: 0;
}
</style>
